<!DOCTYPE html>
<html>
    <head>
        <title>首页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="zh-CN" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>	
		<script src="js/radialIndicator.js"></script> 
		<script src="js/echarts.js"></script>  
	</head> 
	<style>
		.realname .p_1 span{color:#005CFB;} 
	</style>
	<body>
		<div class="col-xs-12 title_top">
			<img src="images/logo.png"/>&nbsp;&nbsp;&nbsp;智慧工地物联监管平台
		</div> 
		<ul id="myTab" class="col-xs-12 cnav nav-tabs">
			<li class="active col-xs-3"><a href="#one" data-toggle="tab"> 起重机械</a></li>
			<li class="col-xs-3"><a href="#two" data-toggle="tab">环保监测</a></li>
			<li class="col-xs-3"><a href="#three" data-toggle="tab">劳务实名</a></li>
			<li class="col-xs-3"><a href="#four" data-toggle="tab">视频监控</a></li>
		</ul>
		<div class="col-xs-12"> 
			<div id="myTabContent" class="col-xs-12 tab-content">
				<!--机械设备开始-->
				<div class="tab-pane fade in active col-xs-12" id="one">
					<div class="content col-xs-12 tower">
						<div class="col-xs-12 top project-count">
							<div class="col-xs-6 left">
								<p class="p_1">塔机监控</p>
								<p class="p_2">覆盖项目：0个</p>
							</div>
							<div class="col-xs-6 right">
								<img class="img" src="images/img_1.png"/>
							</div>
						</div>
						<div class="col-xs-12 top device-count">
							<div class="col-xs-6 left">
								<p class="p_3">总数量<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="device-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div id="a" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
									<span class="sr-only">50% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top online-count">
							<div class="col-xs-6 left">
								<p class="p_3">在线<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="online-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div id="b" class="progress-bar progress-bar_1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
									<span class="sr-only">0% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top alarm-count">
							<div class="col-xs-6 left">
								<p class="p_3">报警<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="alarm-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div id="c" class="progress-bar progress-bar_2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
									<span class="sr-only">0% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 bottom warin-projects" data-monitoralarm="0" >
							<a href="#">查看报警项目</a>
						</div>
					</div>
					<div class="content col-xs-12 elevator">
						<div class="col-xs-12 top project-count">
							<div class="col-xs-6 left">
								<p class="p_1">升降机监控</p>
								<p class="p_2">覆盖项目：0个</p>
							</div>
							<div class="col-xs-6 right">
								<img class="img" src="images/img_2.png"/>
							</div>
						</div>
						<div class="col-xs-12 top device-count">
							<div class="col-xs-6 left">
								<p class="p_3">总数量<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="device-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
									<span class="sr-only">100% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top online-count">
							<div class="col-xs-6 left">
								<p class="p_3">在线<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="online-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar progress-bar_1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
									<span class="sr-only">0% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top alarm-count">
							<div class="col-xs-6 left">
								<p class="p_3">报警<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="alarm-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar progress-bar_2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
									<span class="sr-only">0% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 bottom warin-projects" data-monitoralarm="1" >
							<a href="#">查看报警项目</a>
						</div>
					</div>
				</div>
				<!--机械设备结束-->
				<!--环保监测开始-->
				<div class="tab-pane fade col-xs-12 environment" id="two">
					<div class="content col-xs-12">
						<div class="col-xs-12 top project-count">
							<div class="col-xs-6 left">
								<p class="p_1">覆盖项目：0个</p>
							</div>
							<div class="col-xs-6 right">
								<img class="img" src="images/img_3.png"/>
							</div>
						</div>
						<div class="col-xs-12 top moniterDevice-count">
							<div class="col-xs-6 left">
								<p class="p_3">监控设备<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="moniterdevice-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
									<span class="sr-only">100% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top cleanDevice-count">
							<div class="col-xs-6 left">
								<p class="p_3">喷淋设备<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="cleandevice-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar progress-bar_1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
									<span class="sr-only">100% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top clean-count">
							<div class="col-xs-6 left">
								<p class="p_3">主动防控<span>(台)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1" data-model="clean-count" >0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar progress-bar_2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
									<span class="sr-only">100% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top">
							<div class="col-xs-4 one pm10Alarm-count">
								<div class="prg-cont rad-prg environment_total" id="pm10">
									<div class="rad-con">
										<p class="p_p">PM10</p>		
									</div>
								</div> 
								<div class="col-xs-12 p_p_p" data-model="pm10Alarm-count" >超标0个</div>
							</div>
							<div class="col-xs-4 two pm2p510Alarm-count">
								<div class="prg-cont rad-prg environment_total" id="pm2p5">
									<div class="rad-con">
										<p class="p_p">PM2.5</p>		  
									</div>
								</div>
								<div class="col-xs-12 p_p_p" data-model="pm2p510Alarm-count" >超标0个</div>
							</div>
							<div class="col-xs-4 three noiseAlarm-count">
								<div class="prg-cont rad-prg environment_total" id="noiseAlarm">
									<div class="rad-con">
										<p class="p_p">噪声</p>		
									</div>
								</div>
								<div class="col-xs-12 p_p_p" data-model="noiseAlarm-count" >超标0个</div>
							</div>
						</div>
						<div class="col-xs-12 bottom warin-projects" data-monitoralarm="2" >
							<a href="javascript:;">查看报警项目</a>
						</div>
					</div>
				</div>
				<!--环保监测结束-->
				<!--实名认证开始-->
				<div class="tab-pane fade col-xs-12 realname" id="three">
					<div class="content col-xs-12">
						<div class="col-xs-12 top project-count" >
							<div class="col-xs-6 left">
								<p class="p_1">覆盖项目: <span>0个</span></p>
								<p class="p_2">累积实名认证：0人</p>
							</div>
							<div class="col-xs-6 right">
								<img class="img" src="images/img_4.png"/>
							</div>
						</div>
						<div class="col-xs-12 mas">
							<div class="col-xs-12" id="realname-count"></div>
							<div class="col-xs-12 main_main">
								<div class="main_name clockin"> 0人</div>
								<div class="main_text">进场施工总计</div>
							</div>
						</div>
						<div class="col-xs-12 bottom warin-projects" data-monitoralarm="4" >
							<a href="#">查看缺勤项目</a>
						</div>
					</div>
				</div>
				<!--实名认证结束-->
				<!--视频监控开始-->
				<div class="tab-pane fade col-xs-12 video" id="four">
					<div class="content col-xs-12">
						<div class="col-xs-12 top project-count">
							<div class="col-xs-6 left">
								<p class="p_1">覆盖项目：0个</p>
							</div>
							<div class="col-xs-6 right">
								<img class="img" src="images/img_5.png"/>
							</div>
						</div>
						<div class="col-xs-12 top device-count">
							<div class="col-xs-6 left">
								<p class="p_3">摄像头<span>(个)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1">0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
									<span class="sr-only">100% 完成</span>
								</div>
							</div>
						</div>
						<div class="col-xs-12 top online-count">
							<div class="col-xs-6 left">
								<p class="p_3">在线数量<span class="span_1">(个)</span></p>
							</div>
							<div class="col-xs-6 right">
								<p class="p_1">0</p>
							</div>
							<div class="progress col-xs-12">
								<div class="progress-bar_1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
									<span class="sr-only">0% 完成</span>
								</div>
							</div>
						</div>
					</div>
					<div class="content col-xs-12">
						<div class="col-xs-12 top picture-event">
							<div class="col-xs-6 left">
								<p class="p_1">报警抓拍：<span class="span_2">0次</span></p>
							</div>
							<div class="col-xs-6 right warin-projects" data-monitoralarm="3" >
								<a href="#">查看报警项目 ></a>
							</div>
						</div>
						<div class="col-xs-12 top_top lastPictureEvent">
						</div>
					</div>
				</div>
				<!--视频监控结束-->
			</div> 
		</div>
		<div class="col-xs-12 bot navigates">
			<div class="col-xs-3 nav" data-model="home" >
				<div class="myReport active">
					<div class="icon_1 icon active" ></div>
					<div class="wz active">统计</div>
				</div>
			</div>
			<div class="col-xs-3 nav" data-model="project" >
				<div class="myReport">
					<div class="icon_2 icon" ></div>
					<div class="wz">项目</div>
				</div>
			</div>
			<div class="col-xs-3 nav" data-model="news" >
				<div class="myReport">
					<div class="icon_3 icon" ></div>
					<div class="wz">消息</div>
				</div>
			</div>
			<div class="col-xs-3 nav" data-model="member" >
				<div class="myReport">
					<div class="icon_4 icon" ></div>
					<div class="wz">我的</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script> 
	mui.plusReady(function(){
		var token = get_token();
		var data = {};
		data.token = token;
		function paint_machine_data(api,class_name){
			if(!api){
				_mui_dialog._alert('api不存在');
				return false;
			}
			var top_dom = class_name ? class_name : 'tower';
			data.api = api;
			mui.ajax(project_cofnig.service_url,{
				data:data,
				async:true, 
				dataType:'json',
				type:'get', 
				success:function(ref){
					if(ref.code == 0){ 
						$("."+top_dom+" .project-count .p_2").text("覆盖项目："+ref.data.projectCount+"个"); 
						var value = 0;
						var percent = '100%';
						mui.each($("."+top_dom+" .col-xs-12 .right .p_1"),function(i,v){
							_this = $(this);
							switch(_this.data('model')){
								case 'device-count':
									value = ref.data.device;
									break;
								case 'online-count':
									value = ref.data.online;
									percent = toPercent(ref.data.online/ref.data.device);
									break;
								case 'alarm-count':
									value = ref.data.alarm;
									percent = toPercent(ref.data.alarm/ref.data.device);
									break;
							}
							_this.text(value);
							_this.parents(".col-xs-12 .top").find(".progress-bar").css({"width":percent});
						});
					}
					return true;
				}
			});
		}
		//获取环保监测统计数据
		data.api = 'get-environment-real-time-gather-info';
		mui.ajax(project_cofnig.service_url,{
			data:data,
			async:true, 
			dataType:'json',
			type:'get', 
			success:function(ref){
					if(ref.code == 0){ 
						$(".environment .project-count .p_1").text("覆盖项目："+ref.data.projectCount+"个"); 
						var value = initValue = 0;
						var  _this = barColor = '';
						var percent = '100%';
						mui.each($(".environment .col-xs-12 .right .p_1"),function(i,v){
							_this = $(this);
							switch(_this.data('model')){
								case 'moniterdevice-count':
									value = ref.data.moniterDevice;
									break;
								case 'cleandevice-count':
									value = ref.data.cleanDevice;
									percent = toPercent(ref.data.cleanDevice/ref.data.moniterDevice);
									break;
								case 'clean-count':
									value = ref.data.cleanCount;
									percent = toPercent(ref.data.cleanCount/ref.data.moniterDevice);
									break;	
							}
							_this.text(value);
							_this.parents(".col-xs-12 .top").find(".progress-bar").css({"width":percent});
						});
						mui.each($(".environment_total"),function(i,v){
							_this = $(this);
							switch(_this.next(".p_p_p").data("model")){
								case 'pm10Alarm-count':
									value = ref.data.pm10Alarm;
									barColor = '#F99A1E';
									initValue = toPercent(ref.data.pm10Alarm/ref.data.moniterDevice,true);
									break;
								case 'pm2p510Alarm-count':
									value = ref.data.pm2p510Alarm;
									barColor = '#7C79B0';
									initValue = toPercent(ref.data.pm2p510Alarm/ref.data.moniterDevice,true);
									break;
								case 'noiseAlarm-count':
									value = ref.data.noiseAlarm;
									barColor = '#929199';
									initValue = toPercent(ref.data.noiseAlarm/ref.data.moniterDevice,true);
									break;  
							}
							$('#'+_this.attr('id')).radialIndicator({
								barColor: barColor,
								barWidth: 5,
								initValue: initValue,
								roundCorner : true,
								percentage: true	
							});
							_this.next(".p_p_p").text("超标"+value+"个");
						});
					}
					return false;
				}
			});
		
		//获取劳务实名统计数据
		function realname_data(){
			data.api = 'get-realname-real-time-gather-info';
			mui.ajax(project_cofnig.service_url,{
				data:data,
				async:true, 
				dataType:'json',
				type:'get',
				success:function(ref){
					if(ref.code == 0){ 
						$(".realname .clockin").text(ref.data.clockIn+"人");
						$(".realname .project-count .p_1 span").text(ref.data.projectCount+"个"); 
						$(".realname .project-count .p_2").text("累积实名认证："+ref.data.workerCount+"人");
						var myChart = document.getElementById('realname-count');
						var resizeMainContainer = function () {
							myChart.style.width = window.innerWidth-30+'px';
							myChart.style.height = window.innerHeight-300+'px';
						};
						resizeMainContainer();
						var myChart = echarts.init(myChart);
						$(window).on('resize',function(){
							resizeMainContainer();
							myChart.resize();
						});
						myChart.title = '嵌套环形图';
						option = {
							tooltip: {trigger: 'item',show:false,formatter: "{a} <br/>{b}: {c} ({d}%)"},
							legend: { itemWidth:10,itemHeight:10,x: 'left',bottom: 0,left: 'center',selectedMode:false,data:['农民工总计','施工管理人员']},
							color:['#00A3FE','#FF6132'],
							series: [
								{
									type:'pie',
									center: ['50%', '50%'],
									radius: ['35%', '55%'],
									label: {
										normal: {
											formatter:function(a){
												if(a.name == '农民工总计'){
													return ref.data.migrant+'人';
												}
												return ref.data.manager+'人';
											},
											rich: {
												a: {
													color: '#999',
													lineHeight: 22,
													align: 'center'
												},
												b: {
													fontSize: 14,
													lineHeight: 33
												},
											}
										}
									},
									data:[
										{value:ref.data.manager, name:'施工管理人员'},
										{value:ref.data.migrant, name:'农民工总计'}
									]
								}
							]
						};
						myChart.setOption(option);
					}
					return false;
				}
			});
		}
		
		//获取视频监控统计数据
		function video_data(){
			data.api = 'get-video-real-time-gather-info';
			mui.ajax(project_cofnig.service_url,{
				data:data,
				async:true,
				dataType:'json',
				type:'get',
				success:function(ref){
					if(ref.code == 0){ 
						$(".video .project-count .p_1").text("覆盖项目："+ref.data.projectCount+"个"); 
						$(".video .device-count .p_1").text(ref.data.deviceCount); 
						$(".video .online-count .p_1").text(ref.data.onlineCount); 
						$(".video .picture-event .span_2").text(ref.data.pictureEvent+"次"); 
						//设置统计图比例 
						var onlineCount_percent = toPercent(ref.data.onlineCount/ref.data.deviceCount);
						$(".video .online-count  .progress-bar_1").css({"width":onlineCount_percent});
						if(ref.data.lastPictureEvent){
							var _html = '';
							mui.each(ref.data.lastPictureEvent,function(i,v){
									_html += '<div class="col-xs-4">';
									_html += '<img class="img_img" src="'+v.smallPicUrl+'"/>';
									_html += '</div>';
							});
							$(".lastPictureEvent").html(_html);
						}
					}
					return false;
				}
			});
		}
		paint_machine_data('get-tower-real-time-gather-info');
		paint_machine_data('get-elevator-real-time-gather-info','elevator');
		realname_data();
		video_data();
		id_of_setinterval = get_data_setlnterval(function(){
			paint_machine_data('get-tower-real-time-gather-info');
			paint_machine_data('get-elevator-real-time-gather-info','elevator');
			realname_data();
			video_data();
		});
	});
	//查看报警项目
	mui("#myTabContent").on('tap','.warin-projects',function(){
		var monitoralarm = $(this).data('monitoralarm');
		redirect('lists.html',{monitorAlarm:monitoralarm});
		return false;
	});
	mui(".navigates").on('tap','.nav',function(){
		var model = $(this).data('model');
		var url = '';
		if(model != 'home' ){
			switch(model){
				case 'project':
					url = 'lists.html';
					break;
				case 'news':
					url = 'news.html';
					break;
				case 'member':
					url = 'userinfo.html';
					break;
				default:
					url = 'home.html';
			}
			redirect(url);
		}
		return false;
	});
	mui(".navigates").on('tap','.myReport',function(){
		$(".myReport").removeClass('active');
		$(".icon").removeClass('active');
		$(".wz").removeClass('active');
		$(this).addClass('active');
		$(this).find('.icon').addClass('active');
		$(this).find('.wz').addClass('active');
	})
	function initValue(){ return a();}
</script>
		 